<template>
	<cover-view class="loading-page" v-if="isShow">
		<uni-transition ref="ani" custom-class="transition" mode-class="fade" :styles="styles" :show="isShow">
			<view class="loading-page-box">
				<view class="loading1"></view>
				<text class="text">正在加载</text>
			</view>
		</uni-transition>
	</cover-view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				styles: {
					'width': '100%',
					'height': '100%',
				},
			};
		},
		computed: {
			isShow: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				},
			}
		},
		methods: {
			show() {
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.loading-page {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		// background-color: #fff;
		z-index: 9999;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.loading-page-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			box-sizing: content-box;
			.loading1 {
				width: 36px;
				height: 36px;
				border: 2px solid #ccc;
				// border: 2px solid #ccc;
				border-top-color: transparent;
				border-radius: 100%;
				animation: circle1 infinite 0.75s linear;
			}

			.text {
				font-size: 28rpx;
				margin-top: 14rpx;
				color: #ccc;
			}
		}
	}

	@keyframes circle1 {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>